<template>
  <div>
    <el-card class="box-card">
      <!-- 表头 -->
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home/club' }">俱乐部管理</el-breadcrumb-item>
          <el-breadcrumb-item>详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="详情/查看/编辑" name="one">
          <!-- 用户信息 -->
          <el-form
              :model="ruleForm"
              ref="ruleForm"
              :label-position="labelPosition"
              label-width="120px"
          >
            <el-form-item label="俱乐部名称">
              <el-input v-model="ruleForm.clubName"  style="width:600px" maxlength="15"></el-input>
            </el-form-item>
            <el-form-item label="遛狗地点">
              <el-input v-model="ruleForm.clubAddress" style="width:600px" maxlength="11"></el-input>
            </el-form-item>
            <el-form-item label="遛狗时间">
              <el-time-picker
                  v-model="ruleForm.clubWlakDogTime"
                  format="HH:mm"
                  value-format="HH:mm"
                  placeholder="选择日期时间">
              </el-time-picker>
<!--              <el-input v-model="ruleForm.clubWlakDogTime" style="width:600px" maxlength="15"></el-input>-->
            </el-form-item>
            <el-form-item label="遛狗环境">
              <el-checkbox-group
                  @change="checkboxChange"
                  v-model="ruleForm.environmentList">
                <el-checkbox v-for="item of environment " :label="item" :key="item">{{item}}</el-checkbox>
              </el-checkbox-group>

            </el-form-item>

            <el-form-item label="有无水源">
              <el-radio-group v-model="ruleForm.presenceWater">
                <el-radio :label="1">有</el-radio>
                <el-radio :label="2">没有</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="有无座位">
              <el-radio-group v-model="ruleForm.presenceSet">
                <el-radio :label="1">有</el-radio>
                <el-radio :label="2">没有</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="上传俱乐部照片" >
              <el-upload
                  class="avatar-uploader"
                  :action="upadteurl"
                  :show-file-list="false"
                  :on-success="merchantPhoto"
              >
                <img v-if="ruleForm.clubHeadImage" :src="ruleForm.clubHeadImage" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>

            </el-form-item>
          </el-form>
          <el-button  type="primary" @click="submit()">确定</el-button>
        </el-tab-pane>
        <el-tab-pane label="用户列表" name="two">

          <!-- 表格展示 -->
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="index" type="index" width="100" label="序号" align="center"></el-table-column>
            <el-table-column prop="userName" label="用户名" align="center"></el-table-column>
            <el-table-column prop="userPhone" label="用户手机号 " align="center"></el-table-column>
            <el-table-column prop="userSex" label="用户性别" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.userSex==1?'男':'女'}}</span>
              </template>

            </el-table-column>
            <el-table-column prop="userCity" label="用户城市" align="center"></el-table-column>
            <el-table-column prop="userFansNumber" label="用户粉丝数量" align="center"></el-table-column>
            <el-table-column prop="userFocusNumber" label="用户关注数量" align="center"></el-table-column>
            <el-table-column prop="userGoldCoin" label="金币余额" align="center"></el-table-column>
            <el-table-column prop="userRations" label="口粮余额" align="center"></el-table-column>


          </el-table>
          <el-pagination
              background
              layout="total,  prev, pager, next, jumper"
              :total="total"
              :current-page="current"
              @current-change="handleCurrentChange"
              style="margin-top:24px"
          ></el-pagination>

        </el-tab-pane>

      </el-tabs>

      <el-button style="margin-top: 50px"  type="primary" @click="resetForm()">返回</el-button>
    </el-card>

  </div>
</template>

<script>
import base from "@/views/api/base";

export default {
  data() {
    return {
      merchantList:"https://csglm.oss-accelerate.aliyuncs.com/pet/1642515782586.jpg",
      activeName: 'one',
      environment:[],
      // 店铺照片显示和隐藏
      hideUpload: false,
      // 营业执照显示和隐藏
      license: false,
      //营业执照
      merchant: false,
      // 参数信息
      labelPosition: "left",
      dialogVisible: false, //图片查看
      dialogImageUrl: "", //图片地址
      ruleForm: {
        environmentList:[],

      },
      time:"",
      disabled: true, //禁用被修改

      fileList: "", //图片回显



      formDate: "",
      hideELUpload: "",

      userIdCardFace: "",
      userIdCardFacelist: [],
      userIdCardReverse:"",
      userIdCardReverseList:[],
      userHandCard:"",
      userHandCardList:[],
      tableData:[],
      total: 0, //总条数
      current: 1, //第一页的数据加载
      upadteurl: "", //图片上传地址
    };
  },
  mounted() {
    this.upadteurl = base.sq + "/yuanjiu/upload/uploadImg";
  },
  created() {
    this.clubId=this.$route.query.clubId
    this.getLabelList()
    this.getClubUser()
    this.getHelperDetails()
    // this.ruleForm = JSON.parse(this.$route.query.row)
    // this.userIdCardFace = this.ruleForm.userIdCardFace
    // this.userIdCardReverse = this.ruleForm.userIdCardReverse
    // this.userHandCard = this.ruleForm.userHandCard
    // this.userIdCardFacelist.push(this.ruleForm.userIdCardFace)
    // this.userIdCardReverseList.push(this.ruleForm.userIdCardReverse)
    // this.userHandCardList.push(this.ruleForm.userHandCard)
  },
  methods: {
    getHelperDetails(){
      let param = {
        clubId :this.clubId
      }
      this.$http.article.xqClub(param).then(res => {
        this.ruleForm =res.result
      });
    },
    getLabelList(){
      this.$http.article.getLabelList().then(res => {
        this.environment = res.result
      });
    },
    getClubUser(){
      let param = {
        size: 10,
        current: this.current,
        clubId :this.clubId
      }
      this.$http.article.getClubUser(param).then(res => {
        console.log('用户',res)
        this.tableData=res.result.records
        this.total = res.result.total; //总条数
      });
    },
    // 查询功能
    searchDate() {
      this.current = 1; //模糊查询
      this.getClubUser();
    },
    // 分页功能
    handleCurrentChange(val) {
      this.current = val;
      this.getClubUser();
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //图片上传


    // 店铺照片
    merchantPhoto(res) {
      this.ruleForm.clubHeadImage = res.result;
      console.log("上传商家图片", res.result);
    },
    checkboxChange(){
      console.log(this.ruleForm.environmentList)
    },
    //编辑修改上传
    submit(){
      delete this.ruleForm.clubCreateTime
      this.$http.article.submitClub(this.ruleForm).then(res => {
        this.$message.success("修改成功")
      });

    },
    // 重置按钮信息
    resetForm() {
      this.$router.push('/home/club')
    }
  }
};
</script>

<style lang="scss" scoped>
.bg {
  width: 100%;
  height: 100%;
  background-color: #f4f7fd;
  //   overflow: hidden;
}

.box-card {
  //   display: flex;
  //   justify-content: center;
  width: 98%;
  margin: 0 auto;
  margin-top: 10px;
}

// 店铺封面照片
.showhide ::v-deep .el-upload--picture-card {
  display: none;
}

// 营业执照
.license ::v-deep .el-upload--picture-card {
  display: none;
}

// 店铺照片
.merchant ::v-deep .el-upload--picture-card {
  display: none;
}
</style>